import React, {PureComponent} from 'react';
import {connect} from 'dva';
import {Button, Card, Form, message, Input, Row, Col} from 'antd';
import {PageHeaderWrapper} from '@ant-design/pro-layout';
import List from './components/List'
import DataModal from './components/Modal'
import styles from './index.less';

const FormItem = Form.Item;

@connect(state => ({
  businessUser: state.businessUser,
}))
@Form.create()
export default class index extends PureComponent {
  state = {
    modalVisible: false,
    selectedRows: [],
    items: {},
    modalType: 'add',
  };

  componentDidMount() {
    const {dispatch, businessUser} = this.props;
    businessUser.pagination = {
      page: 1,
      pageSize: 10
    };
    dispatch({
      type: 'businessUser/fetch',
    });
  }

  handleSelectRows = (rows) => {
    this.setState({
      selectedRows: rows,
    });
  }

  handleAddModal = () => {
    this.setState({
      modalVisible: true,
      modalType: 'add',
      items: {}
    });
  }

  handleModalCancel = () => {
    this.setState({
      modalVisible: false,
      items: {}
    });
  }

  onEditItem = (item, flag) => {
    console.log(item);
    this.setState({
      modalVisible: !!flag,
      items: item,
      modalType: 'edit'
    });
  }


  handleSave = (values, form) => {
    const _this = this;
    const {dispatch} = this.props;
    dispatch({
      type: 'businessUser/' + this.state.modalType,
      payload: values,
      callback: (result) => {
        if (result.resultCode === "1") {
          _this.setState({
            modalVisible: false,
            items: {}
          });
          form.resetFields();
          message.success(result.resultDesc);

        } else {
          message.error(result.resultDesc);
        }
      },
    });
  }

  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const {dispatch, businessUser} = this.props;

    businessUser.searchWhere.sortField = "";
    if (sorter.field) {
      console.log(`${sorter.field}_${sorter.order}`);
      businessUser.searchWhere.sortField = `${sorter.field}_${sorter.order}`;
    }

    dispatch({
      type: 'businessUser/fetch'
    });
  };

  handleSearch = (e) => {
    e.preventDefault();
    const {dispatch, form, businessUser} = this.props;
    let searchWhere = businessUser.searchWhere;
    Object.assign(searchWhere, form.getFieldsValue());
    businessUser.searchWhere = searchWhere;
    businessUser.pagination.page = 1;
    dispatch({
      type: 'businessUser/fetch'
    });
  };

  handleFormReset = () => {
    const {form, dispatch, businessUser} = this.props;
    form.resetFields();
    businessUser.searchWhere = {};
    businessUser.pagination.page = 1;
    dispatch({
      type: 'businessUser/fetch'
    });
  }

  renderForm() {
    const {form: {getFieldDecorator}} = this.props;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{md: 6, lg: 24, xl: 48}}>
          <Col md={8} sm={8}>
            <FormItem label="机器码">
              {getFieldDecorator('machineCode')(
                <Input placeholder="机器码"/>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={8}>
            <FormItem label="推荐人">
              {getFieldDecorator('recommend')(
                <Input placeholder="推荐人"/>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={8} style={{paddingTop: 3, paddingLeft: 5, textAlign: 'right'}}>
            <span className={styles.submitButtons}>
              <Button type="primary" htmlType="submit">查询</Button>
              <Button style={{marginLeft: 8}} onClick={this.handleFormReset}>重置</Button>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  render() {
    const {businessUser: {loading, data}} = this.props;
    const {selectedRows, modalVisible, modalType, items} = this.state;

    return (
      <PageHeaderWrapper title="列表">
        <div className={styles.tableListForm}>{this.renderForm()}</div>
        <Card bordered={false}>
          <div className={styles.tableList}>
            <div className={styles.tableListOperator}>
              <Button style={{width: '100%'}} icon="plus" type="dashed" onClick={this.handleAddModal}>
                新建
              </Button>
            </div>
            <List
              selectedRows={selectedRows}
              loading={loading}
              data={data}
              onSelectRow={this.handleSelectRows}
              onEditItem={this.onEditItem}
              onChange={this.handleStandardTableChange}
            />
          </div>
        </Card>
        <DataModal
          key={Date.now()}
          modalType={modalType}
          modalVisible={modalVisible}
          handleSave={this.handleSave}
          handleModalCancel={this.handleModalCancel}
          items={items}
        />
      </PageHeaderWrapper>
    );
  }
}
